<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="query.name" class="filter-item w-200" size="medium" placeholder="菜品名称"></el-input>
            <el-select v-model="query.supply_type" multiple class="filter-item" style="width: 250px" size="medium" placeholder="请选择供应类型">
                <el-option
                        v-for="item in supply_types"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="query.food_type" clearable class="filter-item w-200" size="medium" placeholder="请选择菜品种类">
                <el-option
                        v-for="item in foodTypeData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="query.school_id" clearable class="filter-item w-200" size="medium" placeholder="请选择所属学校">
                <el-option
                        v-for="item in schoolData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchList(true)">搜 索</el-button>
        </div>
        <el-table :data="foodData" v-loading="loading" border style="width: 100%">
            <el-table-column width="100px" label="#" align="center">
                <template slot-scope="scope" >
                    {{query.size * (query.page-1) + scope.$index + 1}}
                </template>
            </el-table-column>
            <!--<el-table-column-->
                    <!--prop="thumb_image"-->
                    <!--header-align="center"-->
                    <!--align="center"-->
                    <!--width="150px"-->
                    <!--label="菜品样图">-->
                <!--<template slot-scope="scope">-->
                    <!--<el-popover-->
                            <!--placement="right"-->
                            <!--title=""-->
                            <!--trigger="hover">-->
                        <!--<img :src="scope.row.full_thumb_images" width="200px" height="200px" />-->
                        <!--<img slot="reference" v-bind:src="scope.row.full_thumb_images" :alt="scope.row.full_thumb_images" style="max-height: 50px;max-width: 130px">-->
                    <!--</el-popover>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column label="供应类型" width="150px" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.supply_type === 1">早餐</span>
                    <span v-if="scope.row.supply_type === 2">中餐</span>
                    <span v-if="scope.row.supply_type === 3">晚餐</span>
                    <span v-if="scope.row.supply_type === 12">早中餐</span>
                    <span v-if="scope.row.supply_type === 13">早晚餐</span>
                    <span v-if="scope.row.supply_type === 23">中晚餐</span>
                    <span v-if="scope.row.supply_type === 123">早中晚餐</span>
                </template>
            </el-table-column>
            <el-table-column prop="type.name" label="菜品种类" align="center"></el-table-column>
            <el-table-column prop="school.name" label="所属学校" align="center"></el-table-column>
            <el-table-column label="状态" width="100px" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-check" v-if="scope.row.status === 1" />
                    <i class="el-icon-close" v-else />
                </template>
            </el-table-column>
            <el-table-column prop="updated_at" label="更新时间" align="center" width="200px"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { fetchFoods } from '@/api/food'
    import { fetchSchools, fetchFoodTypes } from '@/api/data'
    export default {
      name: 'list',
      data() {
        return {
          loading: false,
          total: 0,
          query: {
            school_id: '',
            food_type: '',
            supply_type: '',
            size: 10,
            page: 1,
            name: ''
          },
          foodData: [],
          foodTypeData: [],
          schoolData: [],
          supply_types: [
            {
              value: 1,
              label: '早餐'
            },
            {
              value: 2,
              label: '中餐'
            },
            {
              value: 3,
              label: '晚餐'
            }
          ]
        }
      },
      methods: {
        fetchList(resetPage = false) {
          this.loading = true
          if (resetPage === true) {
            this.query.page = 1
          }
          fetchFoods(this.query).then(res => {
            this.foodData = res.data
            this.total = res.meta.total
            this.loading = false
          })
        },
        handleSizeChange(size) {
          this.query.size = size
          this.fetchList()
        },
        handleCurrentChange(page) {
          this.query.page = page
          this.fetchList()
        }
      },
      created() {
        this.fetchList()
        // 获取当前学校下的食品种类列表
        fetchFoodTypes().then(res => {
          this.foodTypeData = res.foodTypes
        })
        // 获取学校列表
        fetchSchools().then(res => {
          this.schoolData = res.schools
        })
      }
    }
</script>

<style scoped>
    .el-icon-check{
        color: green;
    }
    .el-icon-close{
        color: red;
    }
</style>
